import React, { useState, useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Alert, Typography } from 'antd';
import { useIntl, FormattedMessage, connect } from 'umi';
import moment from 'moment'

import { UserModelState } from '@/models/user'
import styles from './Welcome.less';

const CodePreview: React.FC = ({ children }) => (
  <pre className={styles.pre}>
    <code>
      <Typography.Text copyable>{children}</Typography.Text>
    </code>
  </pre>
);

 const Welcome = (props) => {
   const {
     currentWeather: {
       citynm,
       temperature,
       weather_curr,
       weather_icon
     }
   } = props;
  const [currentTime, setCurrentTime] = useState(moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss'));
  const intl = useIntl();

  useEffect(() => {
    // 获取当前时间
    const interval = window.setInterval(() => {
      const newCurrentTime = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss');
      setCurrentTime(newCurrentTime)
    }, 1000);
    return () => clearInterval(interval);
  }, [currentTime]);

  useEffect(() => {
    // 获取当前天气
    const { dispatch } = props;
    dispatch({
      type: 'user/fetchWeather',
      // payload: {
      //   city: '苏州'
      // },
    })
  }, []);

  return (
    <PageContainer
      header={{
        extra: [
          <div className={styles['header-bottom-right']}>
            <span>
              {currentTime}
            </span>
            <img src={weather_icon} alt="weather"/>
            <span>
              {weather_curr}
            </span>
            <span>
              {temperature}
            </span>
            <span>
              {citynm}
            </span>
          </div >
        ]
      }}
    >
      <Card>
        <Alert
          message={intl.formatMessage({
            id: 'pages.welcome.alertMessage',
            defaultMessage: '更快更强的重型组件，已经发布。',
          })}
          type="success"
          showIcon
          banner
          style={{
            margin: -12,
            marginBottom: 24,
          }}
        />
        <Typography.Text strong>
          <FormattedMessage id="pages.welcome.advancedComponent" defaultMessage="高级表格" />{' '}
          <a
            href="https://procomponents.ant.design/components/table"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-table</CodePreview>
        <Typography.Text
          strong
          style={{
            marginBottom: 12,
          }}
        >
          <FormattedMessage id="pages.welcome.advancedLayout" defaultMessage="高级布局" />{' '}
          <a
            href="https://procomponents.ant.design/components/layout"
            rel="noopener noreferrer"
            target="__blank"
          >
            <FormattedMessage id="pages.welcome.link" defaultMessage="欢迎使用" />
          </a>
        </Typography.Text>
        <CodePreview>yarn add @ant-design/pro-layout</CodePreview>
      </Card>
    </PageContainer>
  );
};


export default connect(({ user, loading }: {
  user: UserModelState,
  loading: { effects: Record<string, string>; };
}) => ({
  currentWeather: user.currentWeather,
  loading: loading.effects['user/fetchWeather']
}))(Welcome)
